<template>
	<el-main>
		<el-card shadow="never" header="过滤器">
			<scFilterBar filterName="filterName" :options="options" @filterChange="change">
				<template #default="{ filterLength, openFilter }">
					<el-badge :value="filterLength" type="danger" :hidden="filterLength <= 0">
						<el-button icon="el-icon-filter" @click="openFilter"></el-button>
					</el-badge>
				</template>
			</scFilterBar>
		</el-card>
		<el-alert
			title="SCUI 独创的过滤条Filterbar,可配置不同类型的过滤字段,以及异步获取数据,在@/config/filterBar.js中可以更改运算符以及其他配置,操作上方过滤条查看下方change事件的回调,在表格查询的场景下非常合适"
			type="success"
			style="margin: 20px 0"
		></el-alert>
		<el-card shadow="never" header="返回值">
			<pre>{{ filterData }}</pre>
		</el-card>
	</el-main>
</template>

<script>
import scFilterBar from '@/components/scFilterBar'

export default {
	name: 'filterBar',
	components: {
		scFilterBar
	},
	data() {
		return {
			filterData: {},
			defaultFilter: [],
			options: [
				{
					label: '订单号',
					value: 'id',
					type: 'text',
					selected: true,
					placeholder: '请输入订单号'
				},
				{
					label: '类型',
					value: 'type',
					type: 'select',
					operator: '=',
					selected: true,
					placeholder: '请选择类型',
					extend: {
						data: [
							{
								label: '选项1',
								value: '1'
							},
							{
								label: '选项2',
								value: '2'
							}
						]
					}
				},
				{
					label: '类型(多选)',
					value: 'type2',
					type: 'select',
					operator: '=',
					placeholder: '请选择类型',
					extend: {
						multiple: true,
						data: [
							{
								label: '选项1',
								value: '1'
							},
							{
								label: '选项2',
								value: '2'
							}
						]
					}
				},
				{
					label: '通知(异步)',
					value: 'noticeType',
					type: 'select',
					operator: '=',
					placeholder: '请选择通知类型',
					extend: {
						request: async () => {
							var list = await this.$API.system.dic.get.get()
							return list.data.map((item) => {
								return {
									label: item.label,
									value: item.value
								}
							})
						}
					}
				},
				{
					label: '通知(远程搜索)',
					value: 'noticeType2',
					type: 'select',
					operator: '=',
					placeholder: '请输入关键词后检索',
					extend: {
						remote: true,
						request: async (query) => {
							var data = {
								keyword: query
							}
							var list = await this.$API.system.dic.get.get(data)
							return list.data.map((item) => {
								return {
									label: item.label,
									value: item.value
								}
							})
						}
					}
				},
				{
					label: '关键词(标签)',
					value: 'tags',
					type: 'tags',
					operator: 'include',
					operators: [
						{
							label: '包含',
							value: 'include'
						},
						{
							label: '不包含',
							value: 'notinclude'
						}
					]
				},
				{
					label: '开关',
					value: 'switch',
					type: 'switch',
					operator: '='
				},
				{
					label: '日期单选',
					value: 'date',
					type: 'date',
					operator: '=',
					operators: [
						{
							label: '等于',
							value: '='
						},
						{
							label: '不等于',
							value: '!='
						}
					]
				},
				{
					label: '日期范围',
					value: 'date2',
					type: 'daterange'
				}
			]
		}
	},
	methods: {
		change(data) {
			this.filterData = data
		}
	}
}
</script>

<style></style>
